<template>
	<view class="detail-container">
		<view v-if="detailItem">
			<image :src="detailItem.img" mode="widthFix" class="detail-image"></image>
			<view class="detail-title">
				{{ detailItem.title }}
			</view>
			<view class="detail-introduce">
				<text class="text-introduce">景区简介：</text>
				{{ detailItem.introduce }}
			</view>
			<view class="detail-time">
				<text class="text-time">
					开放时间：
				</text>
				{{ detailItem.times }}
			</view>
			<view class="detail-tags">
				<view class="tag">{{ detailItem.tag[0] }}</view>
				<view class="tag">{{ detailItem.tag[1] }}</view>
			</view>
			<view v-if="detailItem.isDot" class="isDot">{{ detailItem.isDot }}</view>
		</view>
		<view v-else class="loading">加载中...</view>
	  <view class="recommend-section">
	    <text class="section-title">游玩推荐:</text>
	    <view class="recommend-list">
	      <view 
	        class="recommend-item" 
	        v-for="(item,index) in items" 
	        :key="index"
	      >
	        <image :src="item.url" mode="aspectFill" class="recommend-image"/>
	        <view class="recommend-content">
	          <view class="recommend-title">{{item.title}}</view>
	          <view class="recommend-desc">{{item.desc}}</view>
	          <view class="recommend-tag">{{item.tag}}</view>
	        </view>
	      </view>
	    </view>
	  </view>
		
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHomeList, detailProject } from '../../api/api'

const detailItem = ref(null)
const items = ref([]) // 1. 添加响应式变量存储游玩推荐数据

onLoad(async (options) => {
  try {
    // 获取详情数据
    const res = await getHomeList()
    const data = Array.isArray(res) ? res :
      res.data ? res.data :
      res.list ? res.list : []

    const foundItem = data.find(item => String(item.id) === String(options.id))
    
    if (foundItem) {
      detailItem.value = foundItem
    } else {
      uni.showToast({ title: '未找到对应数据', icon: 'none' })
      setTimeout(() => uni.navigateBack(), 1500)
    }

    // 2. 获取游玩推荐数据（合并到同一个onLoad中）
    const recommendRes = await detailProject()
    items.value = Array.isArray(recommendRes) ? recommendRes :
      recommendRes.data ? recommendRes.data :
      recommendRes.list ? recommendRes.list : []
      
  } catch (err) {
    console.error('数据获取失败:', err)
    uni.showToast({
      title: '数据加载失败: ' + (err.message || '服务器错误'),
      icon: 'none'
    })
  }
})
</script>

<style scoped lang="scss">
	.detail-container {
		padding: 30rpx;

		.loading {
			text-align: center;
			padding: 40rpx;
			color: #888;
		}

		.detail-image {
			width: 100%;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
		}

		.detail-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			color: #303133;
		}

		.detail-introduce {

			color: darkgray;

			.text-introduce {
				color: black;
				font-weight: 700;
			}
		}

		.detail-time {
			font-size: 35rpx;
			color: #777;
			margin-bottom: 20rpx;
		}

		.text-time {
			color: black;
			font-weight: 700;
		}

		.detail-tags {
			display: flex;
			margin-top: 10rpx;
		}

		.demo-tag-owner {
			border: 1px solid rgb(252, 163, 129);
			color: #ffaa00;
			font-size: 20rpx;
			display: flex;
			align-items: center;
			padding: 4rpx 14rpx;
			border-radius: 50rpx;
		}

		.demo-tag-text {
			border: 1px solid #00aaff;
			color: #00aaff;
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			padding: 4rpx 14rpx;
			border-radius: 50rpx;
		}

		.isDot {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-size: 20rpx;
			color: #fff;
			line-height: 32rpx;
			background-color: #ff0000;
			text-align: center;
			border-radius: 10rpx;
			padding: 4rpx 10rpx;
		}
		.recommend-section {
		  margin-top: 40rpx;
		  
		  .section-title {
		    font-weight: 700;
		    color: black;
		    font-size: 32rpx;
		    display: block;
		    margin-bottom: 20rpx;
		  }
		  
		  .recommend-list {
		    display: flex;          // 启用flex布局
		    flex-wrap: wrap;        // 允许换行
		    justify-content: space-between; // 两端对齐
		    gap: 20rpx;            // 项目间距（可选）
		  }
		  
		  .recommend-item {
		    width: calc(50% - 10rpx); // 计算宽度（考虑间距）
		    box-sizing: border-box;    // 确保padding不影响宽度计算
		    display: flex;
		    flex-direction: column;    // 改为纵向排列
		    margin-bottom: 30rpx;
		    padding: 20rpx;
		    background: #f8f8f8;
		    border-radius: 12rpx;
		    
		    .recommend-image {
		      width: 100%;            // 宽度充满容器
		      height: 200rpx;         // 固定高度
		      border-radius: 8rpx;
		      margin-bottom: 15rpx;    // 图片和内容间距
		    }
		    
		    .recommend-content {
		      .recommend-title {
		        font-size: 28rpx;     // 稍微调小字号
		        font-weight: bold;
		        margin-bottom: 8rpx;
		        white-space: nowrap;  // 防止标题换行
		        overflow: hidden;
		        text-overflow: ellipsis; // 超出显示省略号
		      }
		      
		      .recommend-desc {
		        font-size: 24rpx;
		        color: #666;
		        margin-bottom: 8rpx;
		        display: -webkit-box;
		        -webkit-line-clamp: 2; // 限制两行
		        -webkit-box-orient: vertical;
		        overflow: hidden;
		      }
		      
		      .recommend-tag {
		        display: inline-block;
		        padding: 4rpx 12rpx;
		        background: #ffeb3b;
		        border-radius: 6rpx;
		        font-size: 22rpx;
		      }
		    }
		  }
		}
	}
</style>